<template>
    <div class="balance-info-container">
        <List v-model="loading"
              :finished="finished"
              finished-text="没有更多了~"
              :immediate-check="false"
              @load="onLoad">
            <div class="balance-info-box acea-row row-column">
                <div class="balance-info-item van-hairline--bottom" v-for="balanceItem in balanceList" :key="balanceItem.urmId">
                    <div class="top-item acea-row row-middle row-between">
                        <div>{{balanceItem.proName}}</div>
                        <div v-if="balanceItem.urmType === 0 || balanceItem.urmType === 2" class="add">+{{balanceItem.urmMoney}}</div>
                        <div v-else class="min">{{balanceItem.urmMoney}}</div>
                    </div>
                    <div class="bottom-item acea-row row-middle row-between">
                        <div>{{balanceItem.srmCreateTime | format}}</div>
                        <div>{{balanceItem.urmMoneyBefore}}</div>
                    </div>
                </div>
            </div>
        </List>
        <Empty description="暂无数据~" v-if="balanceList.length === 0"/>
    </div>
</template>

<script>
    import {getBalanceList} from "../api/user";
    import {List,Empty} from 'vant';
    import dayjs from "dayjs";
    import localStorage from "@utils/store/localStorage";
    import {mapGetters} from "vuex";

    export default {
        name: "BalanceInfo",
        components: {
            List,
            Empty
        },
        data() {
            return {
                balanceList: [],
                pageNo: 1,
                flag: false,
                name: null,
                loading: false,
                finished: false,
                pid:localStorage.get('creationId'),
            }
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        created() {
            this.init(this.userInfo.umId, 1,this.pid)
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            init(userId, pageNo,pid) {
                getBalanceList(userId, pageNo,pid).then(res => {
                    this.loading = true;
                    this.balanceList.push.apply(this.balanceList, res.data.records);
                    this.loading = false;
                    this.flag = res.data.records.length >= 10;
                })
            },
            onLoad(){
                if (this.flag) {
                    this.pageNo++;
                    this.init(this.userInfo.umId,this.pageNo,this.pid)
                } else {
                    this.finished = true;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .balance-info-container {
        overflow: hidden;

        .balance-info-box {
            width: 345px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            margin: 15px auto;

            .balance-info-item {
                padding: 0 20px;
                height: 70px;

                .top-item {
                    font-size: 16px;
                    font-weight: 500;
                    margin-top: 15px;

                    .add {
                        color: #0DCDB5;
                    }

                    .min {
                        color: #FF8D51;
                    }
                }

                .bottom-item {
                    font-size: 12px;
                    font-weight: 400;
                    color: #A3A5B1;
                    margin-top: 5px;
                }
            }
        }
    }
</style>
